<template>
  <view
    v-if="loaded || active"
    v-show="active"
    class='tab-pane' 
    :title="title" 
    :name="name">
    <slot name="pane"></slot>
  </view>
</template>

<script>

export default {
  props: {
    title: {
      type: String, 
      default: ''
    },
    name: {
      type: String | Number,
      default: ''
    }
  },
  computed: {
    active() {
      let active = this.$parent.currentName === (this.name || this.index);

      if(active) {
        this.loaded = true
      }

      return active
    },
    computedName() {
      return this.name || this.index
    }
  },
  data() {
    return {
      index: null,
      loaded: false
    }
  }
}
</script>